<template>
  <a-modal
    v-model:open="visible"
    :title="title"
    :width="width"
    :destroy-on-close="destroyOnClose"
    :mask-closable="maskClosable"
    :footer="showFooter ? undefined : null"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <slot />
    
    <template v-if="showFooter" #footer>
      <slot name="footer">
        <a-space>
          <a-button @click="handleCancel">{{ cancelText }}</a-button>
          <a-button
            type="primary"
            :loading="confirmLoading"
            @click="handleOk"
          >
            {{ okText }}
          </a-button>
        </a-space>
      </slot>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  open?: boolean
  title?: string
  width?: number | string
  destroyOnClose?: boolean
  maskClosable?: boolean
  showFooter?: boolean
  okText?: string
  cancelText?: string
  confirmLoading?: boolean
}

interface Emits {
  (e: 'update:open', value: boolean): void
  (e: 'ok'): void
  (e: 'cancel'): void
}

const props = withDefaults(defineProps<Props>(), {
  open: false,
  title: '提示',
  width: 600,
  destroyOnClose: true,
  maskClosable: false,
  showFooter: true,
  okText: '确定',
  cancelText: '取消',
  confirmLoading: false
})

const emit = defineEmits<Emits>()

const visible = computed({
  get: () => props.open,
  set: (value: boolean) => emit('update:open', value)
})

const handleOk = () => {
  emit('ok')
}

const handleCancel = () => {
  visible.value = false
  emit('cancel')
}
</script>

<style scoped>
.ant-modal-body {
  max-height: 60vh;
  overflow-y: auto;
}
</style> 